<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="description" content="克氏孤独症行为量表(CABS)评估工具，通过14个项目评估儿童的行为表现，帮助早期筛查孤独症特征，提供专业评估结果和建议。">
        <meta name="keywords" content="克氏孤独症行为量表, CABS量表, 孤独症筛查, 儿童发展评估, 自闭症评估, 孤独症早期干预">
        <meta name="custom-image" content="https://totemlife.cn/apps/public/cabs-scale-cover.jpg">
        <title>克氏孤独症行为量表</title>
        <script src="/apps/js/baidu-tongji-mtx.js"></script>
        <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
        <link href="/apps/css/fontawesome-free-6.4.0-web/css/all.css" rel="stylesheet">
        <style>
            /* 页面样式 */
            body {
                background-color: #f8f9fa;
                padding-bottom: 60px;
            }

            footer {
                position: fixed;
                bottom: 0;
                width: 100%;
                background-color: rgba(15, 76, 129, 0.8);
                color: white;
                padding: 10px 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
            }

            .question-item {
                border-left: 4px solid #6c757d;
                transition: background-color 0.2s ease;
            }

            .question-item:hover {
                background-color: rgba(108, 117, 125, 0.05);
            }

            .form-check-input:checked {
                background-color: #0d6efd;
                border-color: #0d6efd;
            }

            /* 移动端优化 */
            @media (max-width: 576px) {
                /* 标题优化 */
                h1 {
                    font-size: 1.75rem;
                }

                h5 {
                    font-size: 1.1rem;
                }

                /* 表单优化 */
                .form-label {
                    font-size: 0.9rem;
                }

                /* 问题项优化 */
                .question-item {
                    padding: 0.75rem !important;
                }

                .question-text {
                    font-size: 0.95rem;
                }

                /* 提交按钮优化 */
                .submit-btn {
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        {{!-- 克氏孤独症行为量表评估页面 --}}
        <div class="container mt-4 mb-5">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h1>克氏孤独症行为量表</h1>
                        <a href="/apps/scales/scales-dashboard" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left"></i> 返回
                        </a>
                    </div>

                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="card-title">量表说明</h5>
                            <p>克氏孤独症行为量表是一种简便的孤独症筛查工具，通过评估儿童在14个行为项目上的表现，帮助早期发现可能存在的孤独症特征。</p>
                            <p>每个项目采用2级评分，按照行为出现的频率（从不、偶尔、经常）来评定儿童的行为表现。</p>
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>提示：</strong>请根据儿童近期的行为表现如实填写，评估结果仅供参考，不能替代专业医疗机构的诊断。
                            </div>
                        </div>
                    </div>

                    {{#if assessmentHistory.length}}
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">历史评估记录</h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0 history-table">
                                    <thead>
                                        <tr>
                                            <th>日期</th>
                                            <th>总分</th>
                                            <th>结果</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{#each assessmentHistory}}
                                        <tr>
                                            <td>{{formatDate assessment_date "YYYY-MM-DD HH:mm:ss"}}</td>
                                            <td>{{total_score}}</td>
                                            <td>
                                                <span class="badge {{#if (eq result_level '轻微')}}bg-success{{else if (eq result_level '中度')}}bg-warning{{else if (eq result_level '较重')}}bg-orange{{else}}bg-danger{{/if}}">
                                                    {{result_level}}
                                                </span>
                                            </td>
                                            <td class="action-btns">
                                                <a href="/apps/scales/cabs-scale/result/{{id}}" class="btn btn-sm btn-outline-primary">查看</a>
                                                <a href="/apps/scales/cabs-scale/report/{{id}}" class="btn btn-sm btn-outline-secondary">报告</a>
                                            </td>
                                        </tr>
                                        {{/each}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    {{/if}}

                    <form id="cabsScaleForm">
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">基本信息</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="childName" class="form-label">儿童姓名</label>
                                        <input type="text" class="form-control" id="childName" name="child_name" required>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="childAge" class="form-label">儿童年龄</label>
                                        <input type="number" class="form-control" id="childAge" name="child_age" min="1" max="18" required>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="childGender" class="form-label">儿童性别</label>
                                        <select class="form-select" id="childGender" name="child_gender" required>
                                            <option value="" selected disabled>请选择</option>
                                            <option value="男">男</option>
                                            <option value="女">女</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">评估问题</h5>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-bordered mb-0">
                                        <thead>
                                            <tr>
                                                <th style="width: 60%;">行为表现</th>
                                                <th style="width: 13%;" class="text-center">从不</th>
                                                <th style="width: 13%;" class="text-center">偶尔</th>
                                                <th style="width: 14%;" class="text-center">经常</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{#each questions}}
                                            <tr>
                                                <td>{{id}}. {{question_text}}</td>
                                                <td class="text-center">
                                                    <input class="form-check-input" type="radio" name="answers[{{id}}]" value="0" required>
                                                </td>
                                                <td class="text-center">
                                                    <input class="form-check-input" type="radio" name="answers[{{id}}]" value="1" required>
                                                </td>
                                                <td class="text-center">
                                                    <input class="form-check-input" type="radio" name="answers[{{id}}]" value="2" required>
                                                </td>
                                            </tr>
                                            {{/each}}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg submit-btn" id="submitBtn">
                                <i class="fas fa-check-circle me-2"></i>提交评估
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 加载中模态框 -->
        <div class="modal fade" id="loadingModal" tabindex="-1" aria-labelledby="loadingModalLabel" aria-hidden="true" data-bs-backdrop="static">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body text-center py-4">
                        <div class="spinner-border text-primary mb-3" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <h5>正在处理您的评估结果，请稍候...</h5>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <footer>
            <div class="text-center">
                <a id="tmall-app-home-link" href="weixin://dl/business/?appid=wx1b441d1a37b278e1&path=pages/index/index&env_version=release" class="text-decoration-none">
                    <span id="tmall-app-home-title" style="color: white; font-size: 16px; margin-left: 5px;">
                        <i class="fa fa-house"></i> 广州图腾生命医学研究有限公司
                    <span>
                </a>
                &copy; {{currentYear}}
            </div>
        </footer>

        <!-- 将所有JS文件移到这里，并添加defer属性 -->
        <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
        <script src="/apps/js/bootstrap.bundle.min.js" defer></script>
        <script src="/apps/js/wx-client-dom.js" defer></script>
        <script src="/apps/js/chart.js" defer></script>


        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const form = document.getElementById('cabsScaleForm');
                const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));

                form.addEventListener('submit', function(event) {
                    event.preventDefault();

                    // 验证表单
                    if (!form.checkValidity()) {
                        event.stopPropagation();
                        form.classList.add('was-validated');
                        return;
                    }

                    // 显示加载中模态框
                    loadingModal.show();

                    // 收集表单数据
                    const formData = new FormData(form);
                    const data = {};

                    // 转换为JSON对象
                    for (const [key, value] of formData.entries()) {
                        if (key.startsWith('answers[')) {
                            if (!data.answers) {
                                data.answers = {};
                            }
                            const questionId = key.match(/\[(\d+)\]/)[1];
                            data.answers[questionId] = value;
                        } else {
                            data[key] = value;
                        }
                    }

                    // 提交评估
                    fetch('/apps/scales/cabs-scale/submit', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(data)
                    })
                    .then(response => response.json())
                    .then(result => {
                        if (result.success) {
                            // 跳转到结果页面
                            window.location.href = `/apps/scales/cabs-scale/result/${result.assessmentId}`;
                        } else {
                            throw new Error(result.message || '提交失败');
                        }
                    })
                    .catch(error => {
                        console.error('提交评估出错:', error);
                        loadingModal.hide();
                        alert('提交评估失败，请稍后重试');
                    });
                });
            });
        </script>
    </body>
</html> 
